<template>
	<view class="integralMall">
		<!-- <header-box :title="pageTitle"></header-box> -->
		<view class="integralMall-num">
			<image class="integralMall-num-bg" src="../../static/img/integralMall-icon.png" mode=""></image>
			<view class="integralMall-num-content">
				<view class="_num-content-title"><text>我的积分</text></view>
				<view class="_num-content-data"><text>{{(userInfo && userInfo.integral)?userInfo.integral:0}}</text></view>
			</view>
		</view>
		<view class="integralMall-box">
			<view class="integralMall-main">
				<view class="_main-item" v-for="item,index in list" :key="index" @click="toDetail(item)">
					<view class="_main-item-img"><image class="_item-img noSaveImg" :src="item.img" mode=""></image></view>
					<view class="_main-item-title multi-line"><text>{{item.name}}</text></view>
					<view class="_main-item-integral"><text>{{item.price}}积分</text></view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				pageTitle:'积分商城',
				total:0,
				list:[],
				params:{
					name: "", //名称和
					brand: "", //品牌
					issuer: "", //发行方
					page: 1,
					pageSize: 10
				},
				userInfo:null,
				pageNum:0,
				getListFlag:false,
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.userInfo = uni.getStorageSync('userInfo') || null;
			this.getList()
		},
		onReachBottom() {
			if (!this.getListFlag) return false
			if (this.params.page<this.pageNum) {
				this.params.page++;
				this.getList()
			} else {
				uni.showToast({
					title:'没有更多数据了',
					icon:'none'
				})
			}
		},
		methods:{
			//获取订单列表
			getList(){
				this.$api.getIntegralCollectList(this.params).then(res => {
					console.log(res)
					this.getListFlag = true;
					if(res.code == 200){
						if(this.params.page == 1) this.list = []
						this.list = this.list.concat(res.data.records)
						this.total = res.data.total
						let pageNum = (this.total / this.params.pageSize).toFixed(0);
						if (this.total % this.params.pageSize > 0) {
							this.pageNum = Number(pageNum) + 1;
						} else {
							this.pageNum = Number(pageNum);
						}
					}
				},err => {
	
				})
			},
			toDetail(item) {
				// console.log(item)
				uni.navigateTo({
					url:`/pages/collectionContent/collectionContent?collectionId=${item.collectionId}`
				})
			}
		}
	}
</script>

<style lang="less">
	.integralMall{
		width: 100%;
		min-height: 100vh;
		background-color: #181A20;;
		font-family: PingFangSC-Medium, PingFang SC, '微软雅黑';
		font:caption;
		display: flow-root;
		.integralMall-num{
			width: 100%;
			height: 198rpx;
			position: relative;
			background: #262A34;
			margin-top: 30rpx;
			.integralMall-num-bg{
				width: 100%;
				height: 100%;
			}
			.integralMall-num-content{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				padding: 32rpx 0 0 64rpx;
				box-sizing: border-box;
				._num-content-title{
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 40rpx;
				}
				._num-content-data{
					font-size: 56rpx;
					font-weight: 600;
					color: #FFFFFF;
					line-height: 96rpx;
				}
			}
		}
		.integralMall-box{
			width: 100%;
			.integralMall-main{
				padding: 32rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				._main-item{
					width: 332rpx;
					height:460rpx;
					background: #181A20;
					border-radius: 40rpx;
					border: 4rpx solid #282A2F;
					padding: 20rpx;
					box-sizing: border-box;
					margin-bottom: 20rpx;
					._main-item-img{
						width: 100%;
						height:292rpx;
						border-radius: 40rpx;
						overflow: hidden;
						._item-img{
							width: 100%;
							height: 100%;
						}
					}
					._main-item-title{
						font-size: 28rpx;
						font-weight: 400;
						color: rgba(255,255,255,0.8);
						line-height: 42rpx;
						text-align: center;
						margin-top: 18rpx;
					}
					._main-item-integral{
						font-size: 32rpx;
						font-weight: 400;
						color: #A06AF9;
						line-height: 48rpx;
						text-align: center;
						margin-top: 8rpx;
					}
				}
			}
		}
	}
</style>
